<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><div class="developer-guide-page developer-guide-templates-filters-creating-angular-filters-page"><p>Writing your own filter is very easy: just register a new filter (injectable) factory function with
your module. This factory function should return a new filter function which takes the input value
as the first argument. Any filter arguments are passed in as additional arguments to the filter
function.</p>
<p>The following sample filter reverses a text string. In addition, it conditionally makes the
text upper-case.</p>
<h3>Source</h2>
<div source-edit="MyReverseModule" source-edit-deps="angular.js script.js" source-edit-html="index.html-205" source-edit-css="" source-edit-js="script.js-204" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-206"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-205" ng-html-wrap="MyReverseModule angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-205">


<div ng-controller="Ctrl">
  <input ng-model="greeting" type="greeting"><br>
  No filter: {{greeting}}<br>
  Reverse: {{greeting|reverse}}<br>
  Reverse + uppercase: {{greeting|reverse:true}}<br>
</div>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-204"></pre>
<script type="text/ng-template" id="script.js-204">
  angular.module('MyReverseModule', []).
    filter('reverse', function() {
      return function(input, uppercase) {
        var out = "";
        for (var i = 0; i < input.length; i++) {
          out = input.charAt(i) + out;
        }
        // conditional based on optional argument
        if (uppercase) {
          out = out.toUpperCase();
        }
        return out;
      }
    });

  function Ctrl($scope) {
    $scope.greeting = 'hello';
  }
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-206"></pre>
<script type="text/ng-template" id="scenario.js-206">
  it('should reverse greeting', function() {
    expect(binding('greeting|reverse')).toEqual('olleh');
    input('greeting').enter('ABC');
    expect(binding('greeting|reverse')).toEqual('CBA');
  });
</script>
</div>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="MyReverseModule" ng-set-html="index.html-205" ng-eval-javascript="script.js-204"></div>
<h2>Related Topics</h2>
<ul>
<li><a href="guide/dev_guide.templates.filters">Understanding Angular Filters</a></li>
<li><a href="guide/compiler">Angular HTML Compiler</a></li>
</ul>
<h2>Related API</h3>
<ul>
<li><a href="api/ng.$filter"><code>Angular Filter API</code></a></li>
</ul>
</div></div>
